<template>
    <div class="imagelistContainer">
        <ul class="imagelist"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        style="max-height:100%;overflow-y:auto">
            <li v-for="item in list" :key="item.id">
                <router-link :to="'/home/imageinfo/' + item.id">
                    <img v-lazy="item.img_url">
                    <div class="info">
                        <h4 class="info_title">{{item.title}}</h4>
                        <p class="info_abstract">{{item.abstract}}</p>
                    </div>
                </router-link>
            </li>
            <!-- 加载 -->
            <li class="spinner">
                <mt-spinner type="snake" v-show="is_loading"></mt-spinner>
                <p  v-show="loading">加载完毕~</p>
            </li>
        </ul>
    </div>
</template>

<script>
import {Toast} from 'mint-ui';
export default {
    name:"imagelist",
    data(){
        return {
            loading:false,
            finished:false,
            is_loading:false,
            pageindex:1,
            pagesize:5,
            list:[],
        }
    },
    methods:{
        loadMore(){
            this.loading = true;
            this.$http.get('/images/imageslist',{
                params:{
                    pageindex:this.pageindex,
                    pagesize:this.pagesize
                }
            }).then((res) => {
                var data = res.data;
                
                if(data.Status == 0){
                    if(data.Data.length > 0){
                        this.list = this.list.concat(data.Data);
                        this.pageindex++;
                        this.loading = false;
                    }else{
                        this.loading = true;
                        this.finished = true;
                    }
                }else{
                    Toast("请求失败")
                }
            });
        }
    },
}
</script>

<style lang="less">
.imagelistContainer{
    .imagelist{
        list-style: none;
        padding: 10px;
        margin: 0;
        padding-bottom: 40px;
        li{
            margin-bottom: 8px;
            position: relative;
            img{
                width: 100%;
                height: 260px;
                box-shadow: 0 2px 4px #999;
            }
            image[lazy=loading] {
                width: 40px;
                height: 260px;
                margin: auto;
            }
            div.info{
                position: absolute;
                bottom: 0;
                padding: 5px;
                color: #eee;
                background-color: rgba(0,0,0,0.4);
                .info_title{
                    font-size: 14px;
                }
                .info_abstract{
                    color:#eee;
                    font-size: 12px;
                }
            }
        }
        li.spinner{
            position: relative;
            left:45%;
            border: none;
        }
    }
}
</style>